<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小婷专辑</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-image: url('./image/2.jpg'); /* 程序员预设的背景图片URL */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
        }

        /* 密码输入框样式 */
        .password-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .password-input {
            padding: 10px;
            width: 200px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: none;
        }
        .password-button {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .password-button:hover {
            background: #45a049;
        }

        /* 视频列表容器样式 */
        .video-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            display: none; /* 默认隐藏 */
        }
        .video-item {
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
        }
        .video-thumbnail {
            width: 100%;
            height: 150px; /* 固定缩略图高度 */
            object-fit: cover;
            display: block;
        }
        .video-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.0);
            color: white;
            padding: 5px;
            font-size: 14px;
            text-align: center;
        }

        /* 全屏播放器样式 */
        .fullscreen-player {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: black;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .fullscreen-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .close-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 密码输入框 -->
    <div class="password-container" id="passwordContainer">
        <input type="password" class="password-input" id="passwordInput" placeholder="请输入密码">
        <button class="password-button" onclick="checkPassword()">进入</button>
    </div>

    <!-- 视频列表 -->
    <div class="video-list" id="videoList">
        <!-- 视频项将通过JavaScript动态生成 -->
    </div>

    <!-- 全屏播放器 -->
    <div class="fullscreen-player" id="fullscreenPlayer">
        <video class="fullscreen-video" id="fullscreenVideo" controls autoplay></video>
        <button class="close-button" onclick="closeFullscreenPlayer()">×</button>
    </div>

    <script>
        // 预设密码（程序员设置）
        const correctPassword = "200588";

        // 检查密码
        function checkPassword() {
            const passwordInput = document.getElementById("passwordInput").value;
            if (passwordInput === correctPassword) {
                document.getElementById("passwordContainer").style.display = "none";
                document.getElementById("videoList").style.display = "grid";
                loadVideoList(); // 加载视频列表
            } else {
                alert("密码错误，请重试！");
            }
        }

        // 视频数据（程序员设置）
        const videos = [
            {
                url: "/videos/sample-video1.mp4",
                thumbnail: "/image/v1.png",
            },
            {
                url: "/videos/sample-video6.mp4",
                thumbnail: "/image/v6.png",
            },
            {
                url: "/videos/sample-video2.mp4",
                thumbnail: "/image/v2.png",
            },
            {
                url: "/videos/sample-video3.mp4",
                thumbnail: "/image/v3.png",
            },
            {
                url: "/videos/sample-video4.mp4",
                thumbnail: "/image/v4.png",
            },
            {
                url: "/videos/sample-video5.mp4",
                thumbnail: "/image/v5.png",
            },
            {
                url: "/videos/sample-video7.mp4",
                thumbnail: "/image/v7.png",
            },
            {
                url: "/videos/sample-video9.mp4",
                thumbnail: "/image/v9.png",
            },
            {
                url: "/videos/sample-video10.mp4",
                thumbnail: "/image/v10.png",
            },
            {
                url: "/videos/sample-video11.mp4",
                thumbnail: "/image/v11.png",
            },
            {
                url: "/videos/sample-video12.mp4",
                thumbnail: "/image/v12.png",
            },
            {
                url: "/videos/sample-video13.mp4",
                thumbnail: "/image/v13.png",
            },
            // 添加更多视频...
        ];


        // 加载视频列表
        function loadVideoList() {
            const videoList = document.getElementById("videoList");
            videoList.innerHTML = ""; // 清空旧内容

            videos.forEach(video => {
                const videoItem = document.createElement("div");
                videoItem.className = "video-item";
                videoItem.onclick = () => openFullscreenPlayer(video.url);

                const thumbnail = document.createElement("img");
                thumbnail.className = "video-thumbnail";
                thumbnail.src = video.thumbnail;
                thumbnail.alt = video.title;

                const title = document.createElement("div");
                title.className = "video-title";
                title.textContent = video.title;

                videoItem.appendChild(thumbnail);
                videoItem.appendChild(title);
                videoList.appendChild(videoItem);
            });
        }

        // 打开全屏播放器
        function openFullscreenPlayer(videoUrl) {
            const fullscreenPlayer = document.getElementById("fullscreenPlayer");
            const fullscreenVideo = document.getElementById("fullscreenVideo");
            fullscreenVideo.src = videoUrl;
            fullscreenPlayer.style.display = "flex";
            fullscreenVideo.play();
        }

        // 关闭全屏播放器
        function closeFullscreenPlayer() {
            const fullscreenPlayer = document.getElementById("fullscreenPlayer");
            const fullscreenVideo = document.getElementById("fullscreenVideo");
            fullscreenVideo.pause();
            fullscreenVideo.src = "";
            fullscreenPlayer.style.display = "none";
        }
    </script>
</body>
</html>